
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Writing your first Django app, part 6 &#8212; Django 1.11.22.dev20190603194737 documentation</title>
    <link rel="stylesheet" href="../_static/default.css" type="text/css" />
    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
    <script type="text/javascript" src="../_static/jquery.js"></script>
    <script type="text/javascript" src="../_static/underscore.js"></script>
    <script type="text/javascript" src="../_static/doctools.js"></script>
    <script type="text/javascript" src="../_static/language_data.js"></script>
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Writing your first Django app, part 7" href="tutorial07.html" />
    <link rel="prev" title="Writing your first Django app, part 5" href="tutorial05.html" />



 
<script type="text/javascript" src="../templatebuiltins.js"></script>
<script type="text/javascript">
(function($) {
    if (!django_template_builtins) {
       // templatebuiltins.js missing, do nothing.
       return;
    }
    $(document).ready(function() {
        // Hyperlink Django template tags and filters
        var base = "../ref/templates/builtins.html";
        if (base == "#") {
            // Special case for builtins.html itself
            base = "";
        }
        // Tags are keywords, class '.k'
        $("div.highlight\\-html\\+django span.k").each(function(i, elem) {
             var tagname = $(elem).text();
             if ($.inArray(tagname, django_template_builtins.ttags) != -1) {
                 var fragment = tagname.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>");
             }
        });
        // Filters are functions, class '.nf'
        $("div.highlight\\-html\\+django span.nf").each(function(i, elem) {
             var filtername = $(elem).text();
             if ($.inArray(filtername, django_template_builtins.tfilters) != -1) {
                 var fragment = filtername.replace(/_/, '-');
                 $(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>");
             }
        });
    });
})(jQuery);
</script>


  </head><body>

    <div class="document">
  <div id="custom-doc" class="yui-t6">
    <div id="hd">
      <h1><a href="../index.html">Django 1.11.22.dev20190603194737 documentation</a></h1>
      <div id="global-nav">
        <a title="Home page" href="../index.html">Home</a>  |
        <a title="Table of contents" href="../contents.html">Table of contents</a>  |
        <a title="Global index" href="../genindex.html">Index</a>  |
        <a title="Module index" href="../py-modindex.html">Modules</a>
      </div>
      <div class="nav">
    &laquo; <a href="tutorial05.html" title="Writing your first Django app, part 5">previous</a>
     |
    <a href="index.html" title="Getting started" accesskey="U">up</a>
   |
    <a href="tutorial07.html" title="Writing your first Django app, part 7">next</a> &raquo;</div>
    </div>

    <div id="bd">
      <div id="yui-main">
        <div class="yui-b">
          <div class="yui-g" id="intro-tutorial06">
            
  <div class="section" id="s-writing-your-first-django-app-part-6">
<span id="writing-your-first-django-app-part-6"></span><h1>Writing your first Django app, part 6<a class="headerlink" href="#writing-your-first-django-app-part-6" title="Permalink to this headline">¶</a></h1>
<p>This tutorial begins where <a class="reference internal" href="tutorial05.html"><span class="doc">Tutorial 5</span></a> left off.
We’ve built a tested Web-poll application, and we’ll now add a stylesheet and
an image.</p>
<p>Aside from the HTML generated by the server, web applications generally need
to serve additional files — such as images, JavaScript, or CSS — necessary to
render the complete web page. In Django, we refer to these files as “static
files”.</p>
<p>For small projects, this isn’t a big deal, because you can just keep the
static files somewhere your web server can find it. However, in bigger
projects – especially those comprised of multiple apps – dealing with the
multiple sets of static files provided by each application starts to get
tricky.</p>
<p>That’s what <code class="docutils literal notranslate"><span class="pre">django.contrib.staticfiles</span></code> is for: it collects static files
from each of your applications (and any other places you specify) into a
single location that can easily be served in production.</p>
<div class="section" id="s-customize-your-app-s-look-and-feel">
<span id="customize-your-app-s-look-and-feel"></span><h2>Customize your <em>app’s</em> look and feel<a class="headerlink" href="#customize-your-app-s-look-and-feel" title="Permalink to this headline">¶</a></h2>
<p>First, create a directory called <code class="docutils literal notranslate"><span class="pre">static</span></code> in your <code class="docutils literal notranslate"><span class="pre">polls</span></code> directory. Django
will look for static files there, similarly to how Django finds templates
inside <code class="docutils literal notranslate"><span class="pre">polls/templates/</span></code>.</p>
<p>Django’s <a class="reference internal" href="../ref/settings.html#std:setting-STATICFILES_FINDERS"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATICFILES_FINDERS</span></code></a> setting contains a list
of finders that know how to discover static files from various
sources. One of the defaults is <code class="docutils literal notranslate"><span class="pre">AppDirectoriesFinder</span></code> which
looks for a “static” subdirectory in each of the
<a class="reference internal" href="../ref/settings.html#std:setting-INSTALLED_APPS"><code class="xref std std-setting docutils literal notranslate"><span class="pre">INSTALLED_APPS</span></code></a>, like the one in <code class="docutils literal notranslate"><span class="pre">polls</span></code> we just created. The admin
site uses the same directory structure for its static files.</p>
<p>Within the <code class="docutils literal notranslate"><span class="pre">static</span></code> directory you have just created, create another directory
called <code class="docutils literal notranslate"><span class="pre">polls</span></code> and within that create a file called <code class="docutils literal notranslate"><span class="pre">style.css</span></code>. In other
words, your stylesheet should be at <code class="docutils literal notranslate"><span class="pre">polls/static/polls/style.css</span></code>. Because
of how the <code class="docutils literal notranslate"><span class="pre">AppDirectoriesFinder</span></code> staticfile finder works, you can refer to
this static file in Django simply as <code class="docutils literal notranslate"><span class="pre">polls/style.css</span></code>, similar to how you
reference the path for templates.</p>
<div class="admonition-static-file-namespacing admonition">
<p class="first admonition-title">Static file namespacing</p>
<p class="last">Just like templates, we <em>might</em> be able to get away with putting our static
files directly in <code class="docutils literal notranslate"><span class="pre">polls/static</span></code> (rather than creating another <code class="docutils literal notranslate"><span class="pre">polls</span></code>
subdirectory), but it would actually be a bad idea. Django will choose the
first static file it finds whose name matches, and if you had a static file
with the same name in a <em>different</em> application, Django would be unable to
distinguish between them. We need to be able to point Django at the right
one, and the easiest way to ensure this is by <em>namespacing</em> them. That is,
by putting those static files inside <em>another</em> directory named for the
application itself.</p>
</div>
<p>Put the following code in that stylesheet (<code class="docutils literal notranslate"><span class="pre">polls/static/polls/style.css</span></code>):</p>
<div class="highlight-css snippet"><div class="snippet-filename">polls/static/polls/style.css</div>
<div class="highlight"><pre><span></span><span class="nt">li</span> <span class="nt">a</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">green</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Next, add the following at the top of <code class="docutils literal notranslate"><span class="pre">polls/templates/polls/index.html</span></code>:</p>
<div class="highlight-html+django snippet"><div class="snippet-filename">polls/templates/polls/index.html</div>
<div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">load</span> <span class="nv">static</span> <span class="cp">%}</span>

<span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{%</span> <span class="k">static</span> <span class="s1">&#39;polls/style.css&#39;</span> <span class="cp">%}</span><span class="s">&quot;</span> <span class="p">/&gt;</span>
</pre></div>
</div>
<p>The <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">static</span> <span class="pre">%}</span></code> template tag generates the absolute URL of static files.</p>
<p>That’s all you need to do for development. Reload
<code class="docutils literal notranslate"><span class="pre">http://localhost:8000/polls/</span></code> and you should see that the question links are
green (Django style!) which means that your stylesheet was properly loaded.</p>
</div>
<div class="section" id="s-adding-a-background-image">
<span id="adding-a-background-image"></span><h2>Adding a background-image<a class="headerlink" href="#adding-a-background-image" title="Permalink to this headline">¶</a></h2>
<p>Next, we’ll create a subdirectory for images. Create an <code class="docutils literal notranslate"><span class="pre">images</span></code> subdirectory
in the <code class="docutils literal notranslate"><span class="pre">polls/static/polls/</span></code> directory. Inside this directory, put an image
called <code class="docutils literal notranslate"><span class="pre">background.gif</span></code>. In other words, put your image in
<code class="docutils literal notranslate"><span class="pre">polls/static/polls/images/background.gif</span></code>.</p>
<p>Then, add to your stylesheet (<code class="docutils literal notranslate"><span class="pre">polls/static/polls/style.css</span></code>):</p>
<div class="highlight-css snippet"><div class="snippet-filename">polls/static/polls/style.css</div>
<div class="highlight"><pre><span></span><span class="nt">body</span> <span class="p">{</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">white</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&quot;images/background.gif&quot;</span><span class="p">)</span> <span class="kc">no-repeat</span> <span class="kc">right</span> <span class="kc">bottom</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Reload <code class="docutils literal notranslate"><span class="pre">http://localhost:8000/polls/</span></code> and you should see the background
loaded in the bottom right of the screen.</p>
<div class="admonition warning">
<p class="first admonition-title">Warning</p>
<p class="last">Of course the <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">static</span> <span class="pre">%}</span></code> template tag is not available for use in
static files like your stylesheet which aren’t generated by Django. You
should always use <strong>relative paths</strong> to link your static files between each
other, because then you can change <a class="reference internal" href="../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_URL</span></code></a> (used by the
<a class="reference internal" href="../ref/templates/builtins.html#std:templatetag-static"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">static</span></code></a> template tag to generate its URLs) without having to modify
a bunch of paths in your static files as well.</p>
</div>
<p>These are the <strong>basics</strong>. For more details on settings and other bits included
with the framework see
<a class="reference internal" href="../howto/static-files/index.html"><span class="doc">the static files howto</span></a> and
<a class="reference internal" href="../ref/contrib/staticfiles.html"><span class="doc">the staticfiles reference</span></a>. <a class="reference internal" href="../howto/static-files/deployment.html"><span class="doc">Deploying
static files</span></a> discusses how to use static
files on a real server.</p>
<p>When you’re comfortable with the static files, read <a class="reference internal" href="tutorial07.html"><span class="doc">part 7 of this
tutorial</span></a> to learn how to customize Django’s
automatically-generated admin site.</p>
</div>
</div>


          </div>
        </div>
      </div>
      
        
          <div class="yui-b" id="sidebar">
            
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
  <h3><a href="../contents.html">Table of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">Writing your first Django app, part 6</a><ul>
<li><a class="reference internal" href="#customize-your-app-s-look-and-feel">Customize your <em>app’s</em> look and feel</a></li>
<li><a class="reference internal" href="#adding-a-background-image">Adding a background-image</a></li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="tutorial05.html"
                        title="previous chapter">Writing your first Django app, part 5</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="tutorial07.html"
                        title="next chapter">Writing your first Django app, part 7</a></p>
  <div role="note" aria-label="source link">
    <h3>This Page</h3>
    <ul class="this-page-menu">
      <li><a href="../_sources/intro/tutorial06.txt"
            rel="nofollow">Show Source</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <div class="searchformwrapper">
    <form class="search" action="../search.html" method="get">
      <input type="text" name="q" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    </div>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
              <h3>Last update:</h3>
              <p class="topless">Jun 03, 2019</p>
          </div>
        
      
    </div>

    <div id="ft">
      <div class="nav">
    &laquo; <a href="tutorial05.html" title="Writing your first Django app, part 5">previous</a>
     |
    <a href="index.html" title="Getting started" accesskey="U">up</a>
   |
    <a href="tutorial07.html" title="Writing your first Django app, part 7">next</a> &raquo;</div>
    </div>
  </div>

      <div class="clearer"></div>
    </div>
  </body>
</html>